<template >
  <!-- <div style="width:100vw;height:100vh;overflow: hidden;">
    <div class="main"> -->
      <!-- 通行统计 -->
      <div class="carousel">
        <div class="prev" @click="change('prev')"></div>

        <el-carousel :interval="interval" arrow="always" indicator-position="none" type="card" height="100%"  ref="carousel">
          <el-carousel-item v-for="item in date" :key="item.id">
            <div class="img_areas">
              <img class="img_area" :src="item.img" :alt="item.name">
            </div>
          </el-carousel-item>
        </el-carousel>

        <div class="next" @click="change('next')"></div>
      </div>
    <!-- </div>
  </div> -->
</template>

<script>
export default {
  props:{
    date:{
      type:Object,
      required:true
    },
    interval:{
      type:Number,
      default:4000
    }
  },
  data() {
    return {
      warStatic:{},
    }
  },
  created(){
    this.warStatic = his.$eChartFn.gradientCircleLine();
  },
  methods:{
    change(type){
      this.$refs['carousel'][type]()
    }
  },
  activated() {
  },
}
</script>



<style scoped lang="less">
@import '../../assets/css/chuShiHua.less';
@img:'/static/img/park/security/';
  .main{
    width: calc((100% - 2vw) * 0.24);
    height: calc(((92% - 2vh)  * 0.95 * 0.25) - 4vh );
    background: #050505;
    margin: 50px;
    padding: 1vh 1vw;
  }

.carousel{
  .WH();
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img_area{
  .WH();
  background-color: wheat;
}
/deep/ .el-carousel{
  .WH(80%);
  .el-carousel__item--card{
    width:90%
  }
  .el-carousel__item, .el-carousel__mask{
    left: -20%;
  }
  .el-carousel__arrow{
    display: none;
  }
}
.prev, .next{
  .WH(6%,25%);
  background:url('@{img}/left.webp') no-repeat center;
  background-size: 100%;
  cursor: pointer;
}
.next{
  transform: rotateY(180deg);
}
</style>
